<template>
  <van-list
    class="film-now"
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <div
      class="item-list"
      v-for="item in FilmNowList"
      :key="item.filmId"
      @click="toFlimDetail(item.filmId)"
    >
      <div class="left">
        <img :src="item.poster" alt="" />
      </div>
      <div class="middle">
        <div class="name fz16 ellipsis">
          <span>{{ item.name }}</span
          ><span>{{ item.filmType.name }}</span>
        </div>
        <div :class="{ score: !item.grade }" class="fz14">
          观众评分:{{ item.grade }}
        </div>
        <div class="star ellipsis fz14">
          <span>主演: </span
          ><span v-for="(subitem,index) in item.actors" :key="subitem.name+index"
            >{{ subitem.name }}
          </span>
        </div>
        <div class="info ellipsis fz14">
          <span>{{ item.nation }}</span> |
          <span>{{ item.runtime }}分钟</span>
        </div>
      </div>
      <div class="right fz14">
        <span v-if="item.isPresale">购票</span>
      </div>
    </div>
  </van-list>
</template>

<script>
export default {
  name: "filmNow",
  // 父子传值将Film组件中请求到的列表展示在组件中
  props: ["filmList", "cityInfo"],
  data() {
    return {
      FilmNowList: [],
      // 当组件滚动到底部时，会触发 load 事件
      //并将 loading 设置成 true。
      //此时可以发起异步操作并更新数据，数据更新完毕后，
      //将 loading 设置成 false 即可。
      loading: false,
      //若数据已全部加载完毕，则直接将 finished 设置成 true 即可。
      finished: false,

      pageNum: 1,
      currentResult: null,
    };
  },
  created() {
    this.FilmNowList = this.filmList;
  },
  methods: {
    onLoad() {
      let that = this;
      that.pageNum++;
      this.axios
        .get(process.env.VUE_APP_BASE_URL, {
          headers: {
            "X-Host": "mall.film-ticket.film.list",
          },
          params: {
            cityId: that.cityInfo.cityId,
            pageNum: that.pageNum,
            pageSize: 10,
            type: 1,
            k: 5562640,
          },
        })
        .then((res) => {
          that.currentResult = res.data.data.films;
          that.FilmNowList.push(...that.currentResult);
          this.loading = false;
          if (that.currentResult.length == 0) {
            this.finished = true;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },

    toFlimDetail(filmId) {
      this.$router.push({
        path: "/film/" + filmId,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.film-now {
  .item-list {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    vertical-align: bottom;
    padding: 15px 0;
    text-align: center;
    border-top: 1px solid #ededed;
  
    .left {
      width: 66px;
      flex-shrink: 0;
    }
    .middle {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      text-align: left;
      width: 154px;
      padding: 0 10px;
      .name {
        margin: 2px 0;
      }
      .score {
        height: 17px;
        color: #fff;
      }
    }
    .right {
      width: 50px;
      flex-shrink: 0;
      span {
        color: #ffb232;
        padding: 5px;
        border: 1px solid #ffb232;
      }
    }
  }
}
</style>